<template>
  <div class="medicalRecord_box">
    <el-dialog
      title="填写病历处方"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="dialogShow"
      width="720px"
      @close="cancelInfo"
    >
      <div class="modelInfo">
        <vue-scroll ref="medicalRecordVs" :ops="$store.state.ops">
          <div class="modelInfo_box">
            <div class="infoTitle">就诊概况</div>
            <span class="infoDetail">
              <span class="patientInfo">
                <span class="fontColor">就诊人：</span>
                <span class="margin8">{{MedicalRecordInfo.patientName | patientName}}</span>
                <span class="margin8">{{MedicalRecordInfo.patientSex | patientSex}}</span>
                <span class="margin8">{{MedicalRecordInfo.patientAge | patientAge}}</span>
              </span>
              <span class="patientInfo">
                <span class="fontColor">就诊时间：</span>
                <span
                  class="margin8"
                >{{MedicalRecordInfo.orderTime || MedicalRecordInfo.createTime | baseTimeFun}}</span>
              </span>
              <span class="patientInfo">
                <span class="fontColor">就诊医生：</span>
                <span class="margin8">{{MedicalRecordInfo.doctorName}}</span>
                <span class="margin8">{{MedicalRecordInfo.department}}</span>
                <span class="margin8">{{MedicalRecordInfo.doctorTitle}}</span>
              </span>
            </span>
            <el-form :model="MedicalRecordInfo" :rules="rules" ref="MedicalRecordInfo">
              <div class="infoTitle">患者主诉</div>
              <el-form-item prop="illnessDesc">
                <el-input
                  class="infoDetail"
                  type="textarea"
                  placeholder="请输入患者主诉"
                  :autosize="{ minRows: 6, maxRows: 6}"
                  v-model="MedicalRecordInfo.illnessDesc"
                  maxlength="300"
                  show-word-limit
                  :disabled="MedicalRecordInfo.showMedicalRecord === false"
                  minlength="1"
                ></el-input>
              </el-form-item>
              <div class="info_select" v-if="MedicalRecordInfo.showMedicalRecord !== false">
                <div class="info_select_title">常见主诉</div>
                <div class="info_select_box">
                  <ul>
                    <li
                      class="info_select_item flexVam cursor"
                      v-for="(item, index) in illnessDescList"
                      :key="index"
                      @click="illnessDescClick(item,index)"
                      :class="{'info_select_itemSel':item.isSelect}"
                    >{{item.label}}</li>
                  </ul>
                </div>
              </div>
              <div class="infoTitle">初步诊断</div>
              <el-form-item
                prop="firstDiagnose"
                v-if="MedicalRecordInfo.showMedicalRecord !== false"
              >
                <el-autocomplete
                  style="width:80%"
                  v-model="firstDiagnose"
                  :fetch-suggestions="remoteFirstDiagnose"
                  placeholder="请选择初步诊断结论"
                  @select="changeFirstDiagnose"
                  :disabled="MedicalRecordInfo.showMedicalRecord === false"
                  :maxlength="19"
                  :debounce="0"
                ></el-autocomplete>
                <el-button @click="FirstDiagnoseAdd" class="base_bgBut">添加</el-button>
              </el-form-item>
              <div class="info_select">
                <div class="info_select_box">
                  <ul>
                    <li
                      class="info_select_item info_select_itemSel flexVam cursor"
                      v-for="(item, index) in firstDiagnoseSelList"
                      :key="index"
                    >
                      {{item.label}}
                      <i
                        v-if="MedicalRecordInfo.showMedicalRecord !== false"
                        class="el-icon-error firstDiagnose_delBox"
                        @click="firstDiagnoseDelClick(item,index)"
                      ></i>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="info_select" v-if="MedicalRecordInfo.showMedicalRecord !== false">
                <div class="info_select_title">常见疾病</div>
                <div class="info_select_box">
                  <ul>
                    <li
                      class="info_select_item flexVam cursor"
                      v-for="(item, index) in firstDiagnoseList"
                      :key="index"
                      @click="firstDiagnoseClick(item,index)"
                      :class="{'info_select_itemSel':item.isSelect}"
                    >{{item.label}}</li>
                  </ul>
                </div>
              </div>
              <div class="infoTitle">处理意见</div>
              <el-form-item>
                <el-input
                  class="infoDetail"
                  type="textarea"
                  :autosize="{ minRows: 6, maxRows: 6}"
                  placeholder="请输入处理意见"
                  v-model="MedicalRecordInfo.treatmentSuggestion"
                  maxlength="200"
                  :disabled="MedicalRecordInfo.showMedicalRecord === false"
                  show-word-limit
                  minlength="1"
                ></el-input>
              </el-form-item>
              <p class="dialogTitle">
                处方类型
                <span>普通处方</span>
              </p>
              <ul class="drugsList">
                <li class="drugsLi" v-for="(item,index) in MedicalRecordInfo.drugList" :key="index">
                  <img
                    src="/static/img/delete@2x.png"
                    alt
                    class="deleteImg"
                    v-show="index > 0"
                    @click="deleteRecipeDatas(index)"
                  />
                  <h4>药品{{index + 1}}</h4>
                  <div class="liItem">
                    <el-form-item
                      label-width="55px"
                      label="名称"
                      :prop="'drugList.' + index + '.drugName'"
                      :rules="rules.drugName"
                    >
                      <el-autocomplete
                        style="width:100%"
                        popper-class="autocomplete_box"
                        v-model="item.drugName"
                        :fetch-suggestions="remoteDrugName"
                        placeholder="请输入药品名称"
                        :maxlength="25"
                      >
                        <template slot-scope="{ item }">
                          <div class="name">{{ item.value }}</div>
                          <span class="addr">{{ item.specifications }}{{ item.vendorName }}</span>
                        </template>
                      </el-autocomplete>
                    </el-form-item>
                  </div>
                  <div class="liItem">
                    <el-form-item
                      label-width="55px"
                      label="规格"
                      :prop="'drugList.' + index + '.drugSize'"
                      :rules="rules.drugSize"
                    >
                      <el-input
                        v-model="item.drugSize"
                        placeholder="请输入药品规格"
                        maxlength="10"
                        minlength="1"
                      ></el-input>
                    </el-form-item>
                  </div>
                  <div class="liItem flex">
                    <el-form-item
                      label-width="55px"
                      label="数量"
                      :prop="'drugList.' + index + '.drugCount'"
                      :rules="rules.drugCount"
                    >
                      <el-input-number v-model="item.drugCount" :min="1" :max="10" label="请选择药品单位"></el-input-number>
                    </el-form-item>
                    <el-form-item
                      style="margin-left:15px;"
                      label-width="0px"
                      label
                      :prop="'drugList.' + index + '.drugCountUnit'"
                      :rules="rules.drugCountUnit"
                    >
                      <el-select
                        style="width:278px"
                        v-model="item.drugCountUnit"
                        placeholder="请选择药品数量单位"
                      >
                        <el-option
                          v-for="(unit,index) in drugCountUnitList"
                          :key="index"
                          :label="unit.content"
                          :value="unit.content"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="liItem">
                    <el-form-item
                      label-width="80px"
                      label="服药方式"
                      :prop="'drugList.' + index + '.drugMethods'"
                      :rules="rules.drugMethods"
                    >
                      <el-radio-group v-model="item.drugMethods">
                        <el-radio
                          v-for="(drugMethod, index) in drugMethodList"
                          v-show="index < 4"
                          :key="index"
                          :label="drugMethod.value"
                        >{{drugMethod.value}}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </div>
                  <div class="liItem">
                    <el-form-item
                      label-width="80px"
                      label="用药频次"
                      :prop="'drugList.' + index + '.drugFrequency'"
                      :rules="rules.drugFrequency"
                    >
                      <el-radio-group
                        v-model="item.drugFrequency"
                        @change="changeDrugFrequency(item)"
                      >
                        <el-radio
                          v-for="(DrugFrequency, index) in DrugFrequencyList"
                          v-show="index < 4"
                          :key="index"
                          :label="DrugFrequency.value"
                        >{{DrugFrequency.value}}</el-radio>
                      </el-radio-group>
                      <el-autocomplete
                        style="width:128px"
                        v-model="item.drugFrequencyCopy"
                        :maxlength="6"
                        :fetch-suggestions="queryDrugFrequency"
                        placeholder="请输入"
                        @select="handleSelectDrugFrequency(item)"
                        @input="handleSelectDrugFrequency(item)"
                      ></el-autocomplete>
                    </el-form-item>
                  </div>
                  <div class="liItem">
                    <el-form-item
                      label-width="80px"
                      label="单次剂量"
                      :prop="'drugList.' + index + '.drugDose'"
                      :rules="rules.drugDose"
                    >
                      <el-radio-group v-model="item.drugDose" @change="changeOnceDosage(item)">
                        <el-radio
                          v-for="(OnceDosage, index) in OnceDosageList"
                          v-show="index < 4"
                          :key="index"
                          :label="OnceDosage.value"
                        >{{OnceDosage.value}}</el-radio>
                      </el-radio-group>
                      <el-autocomplete
                        style="width:128px"
                        v-model="item.drugDoseCopy"
                        :maxlength="6"
                        :fetch-suggestions="queryOnceDosage"
                        placeholder="请输入"
                        @select="handleSelectOnceDosage(item)"
                        @input="handleSelectOnceDosage(item)"
                      ></el-autocomplete>
                    </el-form-item>
                  </div>
                  <div class="liItem">
                    <el-form-item
                      label-width="80px"
                      label
                      :prop="'drugList.' + index + '.drugDoseUnit'"
                      :rules="rules.drugDoseUnit"
                    >
                      <el-radio-group v-model="item.drugDoseUnit" @change="changeOnceUnit(item)">
                        <el-radio
                          v-for="(drugCountUnit, index) in drugCountUnitList"
                          v-show="index < 4"
                          :key="index"
                          :label="drugCountUnit.value"
                        >{{drugCountUnit.value}}</el-radio>
                      </el-radio-group>
                      <el-autocomplete
                        style="width:128px"
                        v-model="item.drugDoseUnitCopy"
                        :maxlength="6"
                        :fetch-suggestions="queryOnceUnit"
                        placeholder="请输入"
                        @select="handleSelectOnceUnit(item)"
                        @input="handleSelectOnceUnit(item)"
                      ></el-autocomplete>
                    </el-form-item>
                  </div>

                  <div class="liItem">
                    <el-form-item
                      label-width="80px"
                      label="用药时长"
                      :prop="'drugList.' + index + '.drugTime'"
                      :rules="rules.drugTime"
                    >
                      <el-radio-group v-model="item.drugTime" @change="changeDrugDuration(item)">
                        <el-radio
                          v-for="(DrugDuration, index) in DrugDurationList"
                          v-show="index < 4"
                          :key="index"
                          :label="DrugDuration.value"
                        >{{DrugDuration.value}}</el-radio>
                      </el-radio-group>
                      <el-autocomplete
                        style="width:128px"
                        v-model="item.drugTimeCopy"
                        :maxlength="6"
                        :fetch-suggestions="querySearchDrugDuration"
                        placeholder="请输入"
                        @select="handleSelectDrugDuration(item)"
                        @input="handleSelectDrugDuration(item)"
                      ></el-autocomplete>
                    </el-form-item>
                  </div>
                </li>
              </ul>
              <div class="infoTost">温馨提示：不能为65周岁以上老人、6周岁以下儿童、孕妇及重症患者等特殊人群开具处方。</div>
            </el-form>
          </div>
        </vue-scroll>
      </div>
      <div class="modelbottom">
        <el-button
          v-show="MedicalRecordInfo.drugList.length < 5"
          size="medium"
          icon="el-icon-plus"
          class="base_button addItem modelBtn_l"
          @click="addRecipeDatas()"
          round
        >添加药品</el-button>
        <el-button
          size="medium"
          class="base_button modelBtn_r"
          @click="submitInfo('MedicalRecordInfo')"
          round
        >完成</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDrugQueryByWords,
  getDiseaseQueryByWords
} from "../../requestApi/drug";
import { illnessDescList, firstDiagnoseList } from "../../utils/Drugs";
export default {
  props: ["showTrue", "patientData"],
  data() {
    return {
      dialogShow: false,
      MedicalRecordInfo: {
        firstDiagnose: "",
        treatmentSuggestion: "",
        drugList: [
          {
            drugName: "",
            drugSize: "",
            drugCount: 1,
            drugCountUnit: "",
            drugMethods: "",
            drugDose: "",
            drugDoseCopy: "",
            drugDoseUnit: "",
            drugDoseUnitCopy: "",
            drugFrequency: "",
            drugFrequencyCopy: "",
            drugTime: "",
            drugTimeCopy: ""
          }
        ]
      },
      drugNameLoading: false,
      rules: {
        illnessDesc: [
          { required: true, message: "请添加患者主诉", trigger: "blur" }
        ],
        firstDiagnose: [
          { required: true, message: "请添加初步诊断", trigger: "change" }
        ],
        treatmentSuggestion: [
          { required: false, message: "请添加处理意见", trigger: "blur" }
        ],
        drugName: [
          { required: true, message: "请添加药品名称", trigger: "change" }
        ],
        drugSize: [
          { required: true, message: "请添加规格", trigger: "change" }
        ],
        drugCountUnit: [
          { required: true, message: "请添加单位", trigger: "change" }
        ],
        drugCount: [
          { required: true, message: "请添加数量", trigger: "change" }
        ],
        drugMethods: [
          { required: true, message: "请选择用药方式", trigger: "change" }
        ],
        drugFrequency: [
          { required: true, message: "请选择用药频次", trigger: "change" }
        ]
      },
      illnessDescList: [],
      firstDiagnoseList: [],
      firstDiagnoseSearchList: [],
      firstDiagnose: "",
      firstDiagnoseCopy: "",
      firstDiagnoseLoading: false,
      firstDiagnoseSelList: [],
      drugNameSearchList: [],
      drugCountUnitList: [],
      OnceDosageList: [],
      DrugFrequencyList: [],
      DrugDurationList: [],
      drugMethodList: []
    };
  },
  filters: {
    patientName: function(val) {
      return val ? val : "未知";
    },
    patientSex: function(val) {
      var data = "";
      if (val == 0) {
        data = "女";
      } else if (val == 1) {
        data = "男";
      } else {
        data = "未知";
      }
      return data;
    },
    patientAge: function(val) {
      return val ? val + "岁" : "未知";
    }
  },
  watch: {
    showTrue(val) {
      let self = this;
      self.dialogShow = val;
      if (self.dialogShow) {
        self.$nextTick(() => {
          self.drugCountUnitListFun(val);
          self.$refs["medicalRecordVs"].scrollTo(
            {
              y: "0%"
            },
            300
          );
        });
      }
    },
    patientData: {
      handler(val) {
        // this.drugCountUnitListFun(val);
        // this.clearData();
      },
      deep: true
    },
    "MedicalRecordInfo.illnessDesc": function(data) {
      let self = this;
      if (data) {
        self.illnessDescList.forEach(e => {
          e.isSelect = false;
          if (data.indexOf(e.label) > -1) {
            e.isSelect = true;
          }
        });
      }
    }
  },
  created() {},
  mounted() {
    console.log(
      "MedicalRecordInfo.showMedicalRecord !== false",
      this.MedicalRecordInfo.showMedicalRecord
    );
  },
  methods: {
    /* 赋值  start */
    valueListFun(list) {
      if (list.length) {
        return list[0].value;
      } else {
        return null;
      }
    },
    drugCountUnitListFun() {
      let self = this;
      if (this.$store.state.dict.DICT.drugCountUnitList) {
        this.drugCountUnitList = this.$store.state.dict.DICT.drugCountUnitList;
        this.OnceDosageList = this.$store.state.dict.DICT.OnceDosageList;
        this.DrugFrequencyList = this.$store.state.dict.DICT.DrugFrequencyList;
        this.DrugDurationList = this.$store.state.dict.DICT.DrugDurationList;
        this.drugMethodList = this.$store.state.dict.DICT.drugMethodList;
        this.MedicalRecordInfoFun();
      } else {
        this.$store
          .dispatch("GET_DICT", "")
          .then(data => {
            self.drugCountUnitList =
              self.$store.state.dict.DICT.drugCountUnitList;
            self.OnceDosageList = self.$store.state.dict.DICT.OnceDosageList;
            self.DrugFrequencyList =
              self.$store.state.dict.DICT.DrugFrequencyList;
            self.DrugDurationList =
              self.$store.state.dict.DICT.DrugDurationList;
            self.drugMethodList = self.$store.state.dict.DICT.drugMethodList;
            self.MedicalRecordInfoFun();
          })
          .catch(() => {
            self.$store
              .dispatch("GET_DICT", "")
              .then(data => {})
              .catch(() => {});
          });
      }
    },
    drugListFun(list, data) {
      if (list.length) {
        let index = 7;
        list.forEach((e, i) => {
          if (e.value == data) {
            index = i;
          }
        });
        return index;
      } else {
        return 7;
      }
    },
    MedicalRecordInfoFun(data) {
      this.illnessDescList = illnessDescList;
      this.firstDiagnoseList = firstDiagnoseList;
      this.firstDiagnoseList.forEach((e, i) => {
        e.isSelect = false;
      });
      this.firstDiagnoseSelList = [];
      let drugList = [
        {
          drugName: "",
          drugSize: "",
          drugCount: 1,
          drugCountUnit: "",
          drugMethods: this.valueListFun(this.drugMethodList),
          drugDose: this.valueListFun(this.OnceDosageList),
          drugDoseCopy: "",
          drugDoseUnit: this.valueListFun(this.drugCountUnitList),
          drugDoseUnitCopy: "",
          drugFrequency: this.valueListFun(this.DrugFrequencyList),
          drugFrequencyCopy: "",
          drugTime: this.valueListFun(this.DrugDurationList),
          drugTimeCopy: ""
        }
      ];

      if (this.patientData.drugList && this.patientData.drugList.length) {
        drugList = [];
        this.patientData.drugList.forEach(e => {
          drugList.push({
            drugName: e.drugName,
            drugSize: e.drugSize,
            drugCount: e.drugCount,
            drugCountUnit: e.drugCountUnit,
            drugMethods: e.drugMethods,
            drugDose: e.drugDose,
            drugDoseCopy:
              this.drugListFun(this.OnceDosageList, e.drugDose) > 3
                ? e.drugDose
                : "",
            drugDoseUnit: e.drugDoseUnit,
            drugDoseUnitCopy:
              this.drugListFun(this.drugCountUnitList, e.drugDoseUnit) > 3
                ? e.drugDoseUnit
                : "",
            drugFrequency: e.drugFrequency,
            drugFrequencyCopy:
              this.drugListFun(this.DrugFrequencyList, e.drugFrequency) > 3
                ? e.drugFrequency
                : "",
            drugTime: e.drugTime,
            drugTimeCopy:
              this.drugListFun(this.OnceDosageList, e.drugDose) > 3
                ? e.drugTime
                : ""
          });
        });
      }
      this.MedicalRecordInfo = {
        ...this.patientData,
        firstDiagnose: this.patientData.firstDiagnose || "",
        illnessDesc: this.patientData.illnessDesc || "",
        treatmentSuggestion: this.patientData.treatmentSuggestion || "",
        showMedicalRecord: this.patientData.showMedicalRecord,
        drugList: drugList
      };
      if (this.MedicalRecordInfo.firstDiagnose) {
        if (this.MedicalRecordInfo.firstDiagnose.indexOf(",") > -1) {
          let firstDiagnoseSelArr = this.MedicalRecordInfo.firstDiagnose.split(
            ","
          );
          firstDiagnoseSelArr.forEach(e => {
            this.firstDiagnoseSelList.push({
              label: e,
              content: e
            });
          });
        } else {
          this.firstDiagnoseSelList.push({
            label: this.MedicalRecordInfo.firstDiagnose,
            content: this.MedicalRecordInfo.firstDiagnose
          });
        }
      }
      if (this.MedicalRecordInfo.showMedicalRecord === false) {
        this.rules.illnessDesc[0].required = false;
        this.rules.firstDiagnose[0].required = false;
      } else {
        this.rules.illnessDesc[0].required = true;
        this.rules.firstDiagnose[0].required = true;
      }
    },
    /* 赋值  end */
    /* 单次剂量  start */
    resultsFun(list) {
      if (list.length && list.length > 3) {
        let results = [];
        results = [];
        list.forEach((e, i) => {
          if (i > 3) {
            results.push({
              ...e
            });
          }
        });
        return results;
      } else {
        return list;
      }
    },
    queryOnceDosage(queryString, cb) {
      let self = this;
      let results = self.resultsFun(self.OnceDosageList);
      cb(results);
    },
    handleSelectOnceDosage(item) {
      item.drugDose = item.drugDoseCopy;
    },
    changeOnceDosage(item) {
      item.drugDoseCopy = null;
    },
    queryOnceUnit(queryString, cb) {
      let self = this;
      let results = self.resultsFun(self.drugCountUnitList);
      cb(results);
    },
    handleSelectOnceUnit(item) {
      item.drugDoseUnit = item.drugDoseUnitCopy;
    },
    changeOnceUnit(item) {
      item.drugDoseUnitCopy = null;
    },
    queryDrugFrequency(queryString, cb) {
      let self = this;
      let results = self.resultsFun(self.DrugFrequencyList);
      cb(results);
    },
    handleSelectDrugFrequency(item) {
      item.drugFrequency = item.drugFrequencyCopy;
    },
    changeDrugFrequency(item) {
      item.drugFrequencyCopy = null;
    },
    querySearchDrugDuration(queryString, cb) {
      let self = this;
      let results = self.resultsFun(self.DrugDurationList);
      cb(results);
    },
    handleSelectDrugDuration(item) {
      item.drugTime = item.drugTimeCopy;
    },
    changeDrugDuration(item) {
      item.drugTimeCopy = null;
    },
    /* 单次剂量  end */
    /* 处方 药品筛选  start */
    async remoteDrugName(query, cb) {
      let self = this;
      if (query) {
        let response = await getDrugQueryByWords({
          forSearch: query
        });
        self.drugNameLoading = false;
        if (response.code == 200 && response.data) {
          self.drugNameSearchList = response.data;
          let results = response.data.map(e => {
            return {
              ...e,
              value: e.goodsName,
              label: e.goodsName
            };
          });
          cb(results);
        } else {
          cb([]);
          self.$message({
            type: "error",
            message: "系统出小差！"
          });
        }
      } else {
        cb([]);
      }
    },
    /* 处方 药品筛选  end */
    /* 初步诊断标签  start */
    firstDiagnoseClick(item, index) {
      if (this.firstDiagnoseSelList.length < 5) {
        if (!item.isSelect) {
          this.firstDiagnoseSelList.push({
            ...item
          });
          item.isSelect = true;
        } else {
          this.$message({
            type: "info",
            message: "已选中！"
          });
        }
      } else {
        this.$message({
          type: "info",
          message: "初步诊断最多只能添加5个疾病！"
        });
      }
      this.firstDiagnoseFun();
    },
    firstDiagnoseDelClick(item, index) {
      let delIndex = 0;
      this.firstDiagnoseList.forEach((e, i) => {
        if (e.label == item.label) {
          delIndex = i;
        }
      });
      this.firstDiagnoseSelList.splice(index, 1);
      this.firstDiagnoseList[delIndex].isSelect = false;
      this.firstDiagnoseFun();
    },
    firstDiagnoseFun() {
      if (this.firstDiagnoseSelList) {
        let labels = this.firstDiagnoseSelList.map(e => {
          return e.label;
        });
        this.MedicalRecordInfo.firstDiagnose = labels.join(",");
      } else {
        this.MedicalRecordInfo.firstDiagnose = "";
      }
    },
    async remoteFirstDiagnose(queryString, cb) {
      let self = this;
      if (queryString) {
        let response = await getDiseaseQueryByWords({
          forSearch: queryString
        });
        if (response.code == 200 && response.data) {
          self.firstDiagnoseSearchList = response.data;
          let results = response.data.map(e => {
            return {
              ...e,
              value: e.diseaseName,
              label: e.diseaseName
            };
          });
          cb(results);
        } else {
          cb([]);
          self.$message({
            type: "error",
            message: "系统出小差！"
          });
        }
        this.firstDiagnoseCopy = queryString;
      } else {
        cb([]);
      }
    },
    DiagnoseFun(value) {
      if (this.firstDiagnoseSelList.length < 5) {
        let isSelect = false;
        this.firstDiagnoseSelList.forEach((e, i) => {
          if (e.label == value) {
            isSelect = true;
          }
        });
        if (isSelect) {
          this.$message({
            type: "info",
            message: "已选中！"
          });
        } else {
          this.firstDiagnoseSelList.push({
            label: value,
            value: value,
            isSelect: false
          });
          this.firstDiagnoseList.forEach((e, i) => {
            if (e.label == value) {
              e.isSelect = true;
            }
          });
        }
      } else {
        this.$message({
          type: "info",
          message: "初步诊断最多只能添加5个疾病！"
        });
      }
      this.firstDiagnoseFun();
      this.firstDiagnoseCopy = null;
      this.firstDiagnose = null;
    },
    FirstDiagnoseAdd() {
      if (this.firstDiagnoseCopy) {
        this.DiagnoseFun(this.firstDiagnoseCopy);
        this.firstDiagnoseCopy = ""
      } else {
        this.$message({
          type: "info",
          message: "请先添加初步诊断！"
        });
      }
    },
    changeFirstDiagnose(item) {
      if (item && item.value) {
        this.DiagnoseFun(item.value);
      }
    },
    /* 初步诊断标签  end */
    /* 主诉选择标签  start */
    illnessDescClick(item, index) {
      let length = this.MedicalRecordInfo.illnessDesc.length || 0;
      if (!item.isSelect && length + item.label.length < 300) {
        this.MedicalRecordInfo.illnessDesc =
          this.MedicalRecordInfo.illnessDesc + `${item.label},`;
      }
    },
    /* 主诉选择标签  end */
    /* 处方新增删除  start */
    deleteRecipeDatas(index) {
      let self = this;
      const baseConfirm = this.$baseConfirm({
        show: false,
        title: `您确定删除该药品吗？`,
        text: ``,
        confirmButton: {
          text: "确定",
          ontap: function() {
            baseConfirm.close().then(function(res) {
              self.MedicalRecordInfo.drugList.splice(index, 1);
            });
          }
        },
        cancelButton: {
          text: "取消"
        }
      });
    },
    addRecipeDatas() {
      let self = this;
      if (this.MedicalRecordInfo.drugList.length < 5) {
        this.MedicalRecordInfo.drugList.push({
          drugName: "",
          drugSize: "",
          drugCount: 1,
          drugCountUnit: "",
          drugMethods: this.valueListFun(this.drugMethodList),
          drugDose: this.valueListFun(this.OnceDosageList),
          drugDoseCopy: "",
          drugDoseUnit: this.valueListFun(this.drugCountUnitList),
          drugDoseUnitCopy: "",
          drugFrequency: this.valueListFun(this.DrugFrequencyList),
          drugFrequencyCopy: "",
          drugTime: this.valueListFun(this.DrugDurationList),
          drugTimeCopy: ""
        });
        self.$nextTick(() => {
          self.$refs["medicalRecordVs"].scrollTo(
            {
              y: "100%"
            },
            300
          );
        });
      }
    },
    /* 处方新增删除  end */
    /* 保存并发送  start */
    submitInfo(formName, type) {
      let self = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          self.$emit("submit", self.MedicalRecordInfo, "");
        } else {
          return false;
        }
      });
    },
    cancelInfo() {
      this.$emit("close");
    },
    clearData() {
      this.MedicalRecordInfo.firstDiagnose = "";
      this.MedicalRecordInfo.treatmentSuggestion = "";
    }
  }
};
</script>

<style scoped rel="stylesheet">
/* 选择内容  start */
.info_select {
  width: 100%;
}
.info_select_box ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.info_select_box {
  width: 100%;
}
.info_select_item {
  min-width: 48px;
  height: 30px;
  background: rgba(255, 255, 255, 1);
  border-radius: 15px;
  border: 1px solid rgba(228, 228, 228, 1);
  font-size: 14px;
  font-weight: 400;
  color: rgba(55, 55, 55, 1);
  padding-left: 9px;
  padding-right: 9px;
  margin-right: 10px;
  margin-bottom: 12px;
  position: relative;
}
.info_select_itemSel {
  background: rgba(245, 245, 245, 1) !important;
}
.firstDiagnose_delBox {
  position: absolute;
  right: -6px;
  top: -6px;
  color: rgba(0, 0, 0, 0.6);
}
.info_select_title {
  height: 32px;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  color: rgba(55, 55, 55, 1);
}
/* 选择内容  end */
/* 处方新增删除  start */
.dialogTitle {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: rgba(42, 41, 40, 1);
  height: 66px;
  display: flex;
  align-items: center;
  width: 80%;
}
.dialogTitle > span {
  display: inline-block;
  margin-left: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(55, 55, 55, 1);
}
.drugsList {
  position: relative;
}
.drugsLi {
  width: 640px;
  height: 470px;
  border-radius: 3px;
  border: 1px solid rgba(228, 228, 228, 1);
  margin-top: 16px;
  box-sizing: border-box;
  padding: 0px 20px;
  position: relative;
  overflow: hidden;
}
.deleteImg {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 16px;
  right: 20px;
  cursor: pointer;
}
.liItem {
  font-size: 14px;
}
.addItem {
  background: rgba(255, 199, 73, 1) !important;
}

/* 处方新增删除  end */
.modalwrap {
  z-index: 2012;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  width: 720px;
  height: 705px;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  user-select: none;
  background-color: #fff;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.modelTitle {
  padding: 16px 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: bold;
  color: rgba(42, 41, 40, 1);
}

.modelInfo {
  height: 545px;
  overflow: hidden;
}
.modelInfo_box {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 40px;
  padding-bottom: 10px;
}
.infoTitle {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: rgba(42, 41, 40, 1);
  line-height: 60px;
  width: 100%;
  height: 60px;
}
.infoTost {
  height: 12px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 101, 50, 1);
  line-height: 12px;
  width: 100%;
  text-align: center;
  margin-top: 52px;
}
.infoDetail {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(55, 55, 55, 1);
  line-height: 20px;
}
.margin8 {
  margin: 0 8px;
}
.patientInfo {
  display: inline-block;
  width: 48%;
  line-height: 32px;
}
.fontColor {
  font-weight: 400;
  color: rgba(122, 118, 118, 1);
}
.modelbottom {
  width: 100%;
  height: 100px;
  bottom: 0;
  left: 0;
  background: rgba(241, 241, 241, 1);
  box-shadow: 0px 0px 0px 0px rgba(228, 228, 228, 1);
  border-radius: 0px 0px 6px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modelBtn {
  width: 200px;
  height: 40px;
  text-align: center;
  background: rgba(255, 101, 50, 1);
  border-radius: 20px;
  color: rgba(255, 255, 255, 1);
  line-height: 40px;
}
.modelBtn_l {
  margin-right: 15px;
}
.modelBtn_r {
  margin-left: 15px;
}
</style>
